<template>
    <a-modal
        v-model="show"
        title="关联服务"
        @ok="handleOk"
        dialogClass='contact-services-dialog'
        width='700px'
    >
        <a-input v-model='keyword' @keyup.enter.native='getTable' @blur='getTable' placeholder='ID、名称搜索' class='input'></a-input>
        <a-table
            :data-source="tableData"
            rowKey='id'
            :pagination='false'
            :row-selection="rowSelection"
            :locale="{ emptyText: '暂无数据' }"
        >
            <a-table-column
                key="serviceKind"
                title="类目"
                data-index="serviceKind"
                width='120px'
                :ellipsis='true'
            />
            <a-table-column
                key="title"
                title="服务名"
                data-index="title"
                width='120px'
                :ellipsis='true'
            />
        </a-table>
        <p class='num'>已选{{ selectedRows.length }}条</p>
    </a-modal>
</template>

<script>
export default {
    name: 'ContactServices',
    data () {
        return {
            keyword: '',
            tableData: [],
            selectedRows: [],
            show: false,
            selectList: []
        }
    },
    computed: {
        rowSelection () {
            return {
                selectedRows: this.selectedRows,
                onChange: this.onSelectChange,
                getCheckboxProps: record => ({
                    props: {
                        defaultChecked: this.selectList.includes(record.id),
                        id: record.id + ''
                    }
                })
            }
        }
    },
    created () {
        this.getTable()
    },
    mounted () {

    },
    methods: {
        async getTable () {
            const res = await this.$ApiServer['service/getTable']({
                currentPage: 1,
                pageSize: 99999,
                keyWord: this.keyword,
                status: 4
            })
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.selectedRows = this.tableData.filter(item => this.selectList.includes(item.id))
            } else {
                this.$message.error(res.message)
            }
        },
        handleOk () {
            this.$emit('sure', this.selectedRows)
        },
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRows = selectedRows
        },
        close () {
            this.tableData = []
            this.selectedRows = []
            this.show = false
        }
    }
}
</script>

<style scoped lang='less'>
::v-deep {
    .contact-services-dialog {
        .input {
            width: 200px;
            margin-bottom: 10px;
        }
        .num {
            margin: 10px 0;
        }
    }
}
</style>
